<script>
  export default {
    name: 'login',
    data(){
      return {
        user(){},
        dialogVisible: false,
      }
    },
    methods:{

     //登录
      login:function(){
        this.$axios.post('https://localhost:8080/user/login',this.user()).then((res)=>{
          if(res.data.code == 1){
            this.$message({
              message:res.data.message,
              type: 'success',
            });
            this.$router.push('/shop');
          }
        })
      },
      //注册
      registry:function(){
        this.$axios.post('https://localhost:8080/user/registry',this.user()).then((res)=>{
          if(res.data.code==1){
            this.$message({
              message:res.data.message,
              type: 'success',
            });
            this.dialogVisible = false;
          }else {
            this.$message.error('错了哦，这是一条错误消息');
          }
        })
      },
      //验证码
      SendMail:function(){
        this.$axios.post('https://localhost:8080/user/SendMail',{mail:this.user.UserName}).then((res)=>{
          if(res.data.code==1){
            this.$message({
              message: '邮箱注册成功',
              type: 'success'
            });
          }
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
}
</script>

<template >
<div>
  <el-container>
    <el-main>
      <el-card class="box-card">
        <div slot="header" class="clearfix">

          <!--登录-->
          <div class="login">
            <div class="footer"><span class="wenzi">邮箱登录</span></div>
            <div class="login-username"> <el-input v-model="user.UserName" placeholder="请输入邮箱" class="el-input-user"></el-input></div>
            <div class="login-password"><el-input placeholder="请输入密码" v-model="user.PassWord" show-password class="el-input-password"></el-input></div>
            <div class="login-button">
              <el-button type="primary" size="medium" @click="login">登录</el-button>
              <el-button type="primary" size="medium" class="registry"  @click="dialogVisible = true">注册</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </el-main>
    <!--对话框-->
    <el-dialog
      title="注册"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

      <!--注册-->
      <div class="login">
        <div class="login-username"> <el-input v-model="user.UserName" placeholder="请输入邮箱" class="el-input-user"></el-input></div>
        <div class="login-password"><el-input placeholder="请输入密码" v-model="user.PassWord" show-password class="el-input-password"></el-input></div>
        <div class="login-username"> <el-input v-model="user.Code" placeholder="验证码" class="el-input-user"></el-input>
          <el-link type="primary"  @click="SendMail">主要链接</el-link>
        </div>
        <div class="login-button">
          <el-button type="primary" size="medium" @click="registry">立即注册</el-button>
        </div>
      </div>



    </el-dialog>
  </el-container>
</div>
</template>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
  margin-top: 90px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
  width: 550px;
  margin: auto;
}
.el-card__header{
  height: 343px;
}
.el-input__inner{
  width: 60%;
}
.el-input-user.el-input{
  height: 60px;
  width: 358px;
  margin-top: 108px;
}
.el-input-password.el-input{
  height: 60px;
  width: 358px;
  margin-top: 50px;
}
.login-username {
  height: 138px;
}
.el-button--primary{
  width: 179px;
}
.login-button {
  width: 100%;
  height: 40px;
  margin-top: -50px;
}
.el-button--primary {
  height: 50px;
}
.login {
  height: 600px;
}
.el-input__inner{
  height: 56px;
}
.footer {
  height: 14px;
}
span.wenzi {
  font-size: 35px;
  font-weight: bold;
  color: #E6A23C;
}
button.el-button.registry.el-button--primary.el-button--medium {
  margin: auto;
}
</style>
